 <template>
  <div>
    <el-row :gutter="20" v-if="accountId">
      <el-col :sm="8" :md="8" :lg="8">
        <Card
          style="height:100px"
          title="机构名称"
          :img="enterpriseImg"
          :background_color="'rgb(236, 187, 96)'"
          :data="[{value: orgName}]"
        ></Card>
      </el-col>
      <el-col :sm="6" :md="6" :lg="6">
        <Card
          style="height:130px"
          title="账户统计"
          :img="totalImg"
          :background_color="'#40c9c6'"
          :data="accountData"
        ></Card>
      </el-col>
      <el-col :sm="6" :md="6" :lg="6">
        <Card title="统计" :img="countImg" :background_color="'#f56c6c'" :data="countData"></Card>
      </el-col>
    </el-row>

    <tTable :columns="columns" :data="tableData">
      <!-- 交易金额 -->
      <template v-slot:amount="slotProps">
        <span>￥{{slotProps.scope.row.amount}}</span>
      </template>
    </tTable>

    <Pagination :total="total" @handleChange="handleChange"/>
  </div>
</template>

<script>
import { getPayRecord } from "api/account.js";
import { getPlatformById } from "api/count.js";
import { formatDateTime } from "src/util/time";

import enterprise from "../../../images/enterprise.png";
import total from "../../../images/total.png";
import count from "../../../images/count.png";

import Card from "src/components/card/card.vue";
import Pagination from "src/components/pagination";
import tTable from "src/components/table/index.vue";

import { mapState, mapMutations } from "vuex";

export default {
  data() {
    return {
      tableData: [],
      searchData: "",
      accountId: "", //组织机构id

      columns: [
        {
          attr: { label: "", type: "index", width: "55" }
        },
        {
          attr: { prop: "sourceAccount", label: "发起方" }
        },
        {
          attr: { prop: "targetAccount", label: "接收方" }
        },
        {
          attr: { prop: "purpose", label: "交易类型", width: "120" }
        },
        {
          slot: "amount",
          attr: { prop: "amount", label: "交易金额", width: "120" }
        },
        {
          attr: { prop: "courseName", label: "相关课程", width: "120" }
        },
        {
          attr: { prop: "occurTime", label: "交易时间", width: "200" }
        }
      ],

      countData: [
        {
          name: "用户数",
          value: ""
        },
        {
          name: "课程购买数",
          value: ""
        }
      ], // 今日统计
      accountData: [
        {
          name: "总收入",
          value: ""
        },
        {
          name: "冻结金额",
          value: ""
        },
        {
          name: "余额",
          value: ""
        },
        {
          name: "提现",
          value: ""
        }
      ], // 账户统计
      totalImg: total,
      countImg: count,
      enterpriseImg: enterprise,

      total: -1
    };
  },
  computed: {
    ...mapState(["userInfo"])
  },
  components: { Card, Pagination, tTable },
  mounted() {
    this.GET_USERINFO(); // 获取当前企业id

    let id = this.$route.params && this.$route.params.id;
    if (id) {
      this.orgName = this.$route.query && this.$route.query.name;
      this.accountId = id;
      this.getPlantformData(id);
      this.getData(1, id);
    } else {
      this.getData(1, this.userInfo.orgId);
    }
  },
  methods: {
    ...mapMutations(["GET_USERINFO"]),
    getPlantformData(id) {
      getPlatformById(id).then(res => {
        this.accountData[0].value = "￥" + (res.totalMoney || 0);
        this.accountData[1].value = "￥" + (res.lockMoney || 0);
        this.accountData[2].value = "￥" + (res.balance || 0);
        this.accountData[3].value = "￥" + (res.cashMoney || 0);

        this.countData[0].value = res.userNumber || 0;
        this.countData[1].value = res.courseUerNumber || 0;
      });
    },
    getData: function(pageNumber, id) {
      getPayRecord(pageNumber, id).then(res => {
        this.tableData = res.content.map(item => {
          item.occurTime = formatDateTime(item.occurTime);
          return item;
        });

        this.total = res.totalElements;
      });
    },

    handleChange: function(pageNumber) {
      if (this.accountId) {
        this.getData(pageNumber, this.accountId);
      } else {
        this.getData(pageNumber);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";
.card-container {
  @include fj(flex-start);
}
.card-style {
  margin: 10px;
}
</style>
